<template>
  <!-- 
  vue中的数据分为两类，普通数据和响应数据，
  这两类数据的区别就是响应式数据变化后会自动更新视图（自动调用render方法），
  普通数据没有 
  -->
  <div>
    <!-- 
    都是在html渲染内容的，这两个指令后面接的值是变量名
    v-text:渲染的内容，如果包含html不会被解析出来，类似于innerText
    v-html:渲染的内容，如果包含html会被解析出来，类似于innerHTML
    -->
    <!-- 
    都可以用来控制元素的显隐,后面的值是布尔值
    v-show:利用标签的display属性来控制显隐，浏览器DOM树中还存在，适合频繁操作的场景以及安全要求不高的场景
    v-if:利用元素的添加和删除来控制显隐，浏览器DOM树中不存在，更安全，性能消耗更大，适合安全要求较高的场景
    -->
    <div>
      <h4>常用指令</h4>
      <p v-text="'v-text : ' + name"></p>
      <p v-html="'v-html : ' + bname"></p>
      <!--
      给元素绑定事件 
      在末班中绑定事件，通过v-on：事件类型=“事件句柄、函数”来实现页面交互
      因为这种场景非常高频，所以可以简写为@事件类型=“事件句柄、函数”
      在事件声明的函数中，可以直接通过人形参数获取到事件对象
      如果在事件句柄中传入参数，可以传入第二个参数$event把事件对象手动传入函数内部
      <div v-on：/@绑定的事件="事件句柄/函数"></div>
      -->
      <button @click="f">控制显示和隐藏</button>
      <p v-show="falg">v-show</p>
      <p v-if="falg">v-if</p>
      <!-- 用来在模板中对数据进行渲染，类似于js代码中的if/else id/else 后面的值是一个表达式， -->
      <p v-if="num >= 90">v-if ： 厉害</p>
      <p v-else-if="60 < num && num < 90">v-else-if ：继续加油</p>
      <p v-else="num <= 60">v-else ：重新学吧</p>
      <!-- 
      在模版中渲染列表数据的，被循环渲染的数据可以是数组、对象、数字、字符串
      <div v-for="(循环项,当前索引) in 列表数据"  :key="唯一的标识"></div>
      v-for:
      key:
      -->
      <p><div v-for="(item,index) in list" :key="item.id">数组：{{ item.id }}:{{ item.name }}</div></p>
      <p><div v-for="(value,key,index) in obj" :key="index">对象：{{key}}：{{value}}</div></p>
      <p><div v-for="(item,index) in 3" :key="item">数字：{{ index }}:{{ item }}</div></p>
      <p><div v-for="item in 'wuhu'" :key="item">字符串：{{ item }}</div></p>
      <!-- 
      v-model:
      -->
      <p><input v-model="txt" placeholder="请输入" /></p>
      <p><textarea v-model="txt" placeholder="请输入多行"></textarea></p>
      <p>你输入了 ： {{ txt }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const name = "周杰伦";
const bname = `<b>jay</b>`;
const falg = ref(true);
const num = 40;
const f = () => {
  console.log(falg);
  console.log(falg.value);
  falg.value = !falg.value;
};
const list = [
  { id: 0, name: "jay" },
  { id: 1, name: "joLin" },
  { id: 2, name: "jj" },
];
const obj ={id: 0, name: "xiaomi",age:18 }
const txt = ref("");
</script>

<style scoped>
h4 {
  color: plum;
}
p {
  color: plum;
}
</style>
